<!-- // 轨迹回放进度控制组件，包含进度条、播放/重置按钮和速度选择功能 -->
<script lang="ts" setup>
import { ref } from "vue";
import { PlaySvg, PauseSvg, ResumeSvg, ResetSvg } from "../images/index";

// 定义组件数据
const percentage = ref(0); // 进度百分比(0-100)
const radio = ref(1); // 当前选择的速度倍数
let timer: any = null;
const totalDuration = ref(0); // 总时长
const process = ref("play"); // 当前进程：播放（play）|暂停（pause）| 继续播放（resume）

// 定义emits
const emit = defineEmits(["playClick", "playStop", "resumePlay", "playPause"]);

// 初始化方法，重置速度和进度
const init = (interval: number) => {
  radio.value = 1;
  totalDuration.value = interval || 0;
  percentage.value = 0; // 重置进度为0
  handleInitPlay();
};

const updateProgress = (percent: number) => {
  console.log(percent, "percent");
  percentage.value = percent;
};

// 速度选择器改变事件
const handleRadioChange = () => {
  const timeInterval = (totalDuration.value * 1000) / 100;
  const interval = timeInterval / radio.value;

  if (percentage.value >= 100) {
    return;
  }
  if (process.value !== "pause") {
    return;
  }
  // 清空定时器
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
  // 重启定时器
  timer = setInterval(() => {
    if (percentage.value >= 100) {
      // 不停止播放，是因为地图轨迹与回放进度不一致
      percentage.value = 100;
      handleInitPlay();
    }
  }, interval); // 间隔时间根据速度倍数调整
  emit("resumePlay", radio.value);
};

// 播放按钮点击事件
const handlePlayClick = () => {
  if (percentage.value === 100) {
    return;
  }
  // 进度百分比是100， 按1倍计算每一份的时间， 转换毫秒再除以100，得到1倍下每一份的时间
  const timeInterval = (totalDuration.value * 1000) / 100;
  const interval = timeInterval / radio.value;

  // 使用setTimeout确保重置动画完成，因为重置成0时有个动画效果
  timer = setInterval(() => {
    if (percentage.value >= 100) {
      // 不停止播放，是因为地图轨迹与回放进度不一致
      percentage.value = 100;
      handleInitPlay();
    }
  }, interval); // 间隔时间根据速度倍数调整

  // 触发事件
  if (process.value === "play") {
    emit("playClick", radio.value);
  } else {
    emit("resumePlay", radio.value);
  }
  process.value = "pause";
};

// 暂停事件
const handlePausePlay = () => {
  process.value = "resume";
  if (timer) {
    clearInterval(timer); // 清除定时器
    timer = null;
  }
  emit("playPause");
};

// 初始化播放
const handleInitPlay = () => {
  process.value = "play";
  if (timer) {
    clearInterval(timer); // 清除定时器
    timer = null;
  }
};

// 停止播放
const handleStopPlay = () => {
  process.value = "play";
  percentage.value = 0; // 重置进度为0
  if (timer) {
    clearInterval(timer); // 清除定时器
    timer = null;
  }
  emit("playStop");
};

defineExpose({
  init,
  updateProgress
});
</script>

<template>
  <!-- 进度控制容器 -->
  <div class="progress-wrapper">
    <div class="title">回放进度</div>
    <!-- 进度条组件 -->
    <el-progress :show-text="false" :percentage="percentage" :duration="3"></el-progress>
    <!-- 速度选择单选组 -->
    <el-radio-group v-model="radio" class="custom-radio" @change="handleRadioChange">
      <el-radio :label="1" :value="1">x1</el-radio>
      <el-radio :label="5" :value="5">x5</el-radio>
      <el-radio :label="10" :value="10">x10</el-radio>
      <el-radio :label="20" :value="20">x20</el-radio>
      <el-radio :label="50" :value="50">x50</el-radio>
    </el-radio-group>

    <!-- 操作按钮区域 -->
    <div class="operation">
      <PlaySvg v-if="process === 'play'" class="svgIcon" @click="handlePlayClick"></PlaySvg>
      <PauseSvg v-else-if="process === 'pause'" class="svgIcon" @click="handlePausePlay"></PauseSvg>
      <ResumeSvg v-else-if="process === 'resume'" class="svgIcon" @click="handlePlayClick"></ResumeSvg>
      <ResetSvg class="svgIcon" @click="handleStopPlay"></ResetSvg>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.progress-wrapper {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid #606266;
}
.title {
  margin-bottom: 15px;
  font-size: 14px;
  color: #606266;
}
.custom-radio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 12px;
  .el-radio {
    margin-right: 0;
  }
}
.operation {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 20px;
  .svgIcon {
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all 0.3s ease; // 添加过渡效果
    &:hover {
      filter: drop-shadow(0 0 5px rgb(0 0 0 / 20%)); // 添加阴影效果
      transform: scale(1.1);
    }
  }
}

// 取消progress添加清除时动画效果
::v-deep .el-progress-bar__inner {
  transition: null 0s ease 0s;
  transition-behavior: normal;
}
</style>
